// SearchComponent.jsx
import React, { useState } from 'react';
import { Select, Input, Button, Space } from 'antd';

// 从 Ant Design 中引入组件
const { Option } = Select;

const SearchComponent = ({ columns, onSearch }) => {
  const [key, setKey] = useState('');
  const [value, setValue] = useState('');

  const handleSearch = () => {
    onSearch({ key, value });
  };

  const handleReset = () => {
    setKey('');
    setValue('');
    onSearch({ key: '', value: '' });
  };

  return (
    <Space style={{ marginBottom: 16 }}>
      <Select
        placeholder="选择搜索列"
        value={key || undefined}
        onChange={(value) => setKey(value)}
        style={{ width: 200 }}
        allowClear
      >
        {columns.map((col) => (
          <Option key={col.dataIndex} value={col.dataIndex}>
            {col.title}
          </Option>
        ))}
      </Select>
      <Input
        placeholder="输入搜索内容"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        style={{ width: 200 }}
        allowClear
      />
      <Button type="primary" onClick={handleSearch}>
        搜索
      </Button>
      <Button onClick={handleReset}>
        重置
      </Button>
    </Space>
  );
};

export default SearchComponent;
